<?php
//include_once 'header.php';
?>
<script>
    function liveSearch(str) {
      if(str.length == 0){
                $("#livesearch").text("");
                return;
          }
        var obj = sendRequest("departmentFunctions.php?cmd=1&st="+str);
        if(obj.result == 1){
            displayDepartments(obj);
        }else if(obj.result == 0){
            $('#livesearch').text(obj.result);
        }
    }

    function displayDepartments(obj){
        var i = 0;
        var table = '<div id="divContent">';
        table += '<table id="tableExample" class="reportTable"><tbody>';
        table += "<tr class='header'><th>Department ID</th><th>Department Name </th>";
        table += "<th> </th></tr>";

        for(; i < obj.departments.length; i++){
            table += '<tr class="row1">';  

            table += '<td>'+ obj.departments[i].department_id +'</td>';
            table += '<td>'+ obj.departments[i].department_name +'</td>';
            table += '<td class="modify">';
            table += '<span class="ti-pencil" onclick=update('+ obj.departments[i].department_id +')></span>';                        
            table += '<span class="ti-trash"  onclick=deleteDepartment('+ obj.departments[i].department_id +',this)></span></td></tr>';                       
        }          
        table += "</tbody></table>";        
        $('#livesearch').html(table);
        $('#livesearch').show();
    }
    
    function getDepartmentAdd(){
            $("#content_area").show();
            $("#content_area").load('departmentsadd.php');
    }
    
    function getAllDepartments() {
        var obj = sendRequest("departmentFunctions.php?cmd=3");
        if(obj.result == 1){
            displayDepartments(obj);
        } 
    }
    
    function deleteDepartment(id,span){
        
        var obj = sendRequest("departmentFunctions.php?cmd=5&id="+id);
        if(obj.result == 1){
            showStatus( obj);
            deleteRow(span);
        }else{
           showStatus(obj); 
        }
    }
    
    function update(id){
        
        $("#content_area").show();
        $("#content_area").load('departmentUpdate.php?id='+id); 
    }
    
    function hideStatus(){
        $('#status').slideUp();
    }
    
    $('document').ready(function(){
        getAllDepartments();
    });
    
</script>

<div class="container">
    <h1>Departments</h1>
    <div id="dash">
        <span class=ti-plus onclick="getDepartmentAdd()"></span>
        <span class=ti-pencil onclick="getAllDepartments()"></span>
        <span class=ti-trash onclick="getAllDepartments()"></span>
        <div id="search">
            <input type="text" type="text" name="st" size="40" max-size="60" 
                   onkeyup="liveSearch(this.value)">
            <span class="ti-search"></span>
        </div>
    </div>
    <div id="status_content">
    <h2>status message 
        <span class="ti-arrow-circle-down" onclick="toggleStatus()">

        </span></h2>
    <div id="status"></div>                                        
</div>
    
<div id="divContent">
    <h2><span class="ti-angle-down" onclick="hideForm(0)"></span></h2>
    <div id="viewArea">
        <div id="content_area"></div>
    </div>

    <div id="displayArea">
        <div id="livesearch"></div>
    </div>
    </div>
    
</div>


